<!DOCTYPE html>
<html lang="zh">

<head>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="utf-8">
    <title>our team</title>
    <meta name="keywords" />
    <meta name="description" />
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/team.css">
</head>

<body>
    <div class="home">

        <div class="header">
            <div class="box">
                <div class="l">
                    <a href="./index.html" class="logo animated fadeInUp">
                        <img src="./images/logo.png" alt="">
                    </a>
                </div>
                <div class="links">
                    <a href="index.html">
                        Home
                    </a>
                    <a href="index.html?scrollTo=md1">
                        Technology
                    </a>
                    <a href="team.html" class="on">
                        Our Team
                    </a>
                    <a href="join.html">
                        Join Us
                    </a>
                    <a href="">
                        EN-CN
                    </a>
                </div>
            </div>
        </div>

        <div class="pheader">
            <div class="menu">
                <div class="l">
                    <a href="./index.html" target="_self" class="animated fadeInUpLeft">
                        <img src="./images/logo.png" alt="">
                    </a>
                </div>
                <div class="navbox">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <div class="menuList">
            <div class="item">
                <div class="tb">
                   <a href="index.html">Home</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                   <a href="index.html?scrollTo=md1">Technology</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                 <a href="team.html">Our Team</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href="join.html">Join Us</a>
                </div>
            </div>
            <div class="item">
                <div class="tb">
                    <a href=""> EN-CN</a>
                </div>
            </div>
        </div>

        <div class="banner">
            <img src="./images/team.png" alt="">
            <div class="text animated fadeInUp">
                Meet our team member
            </div>
        </div>

        <div class="section1">
            <img src="./images/bgbg.png" class="bg" alt="">
            <div class="wrap">
                <div class="item wow animated fadeInUp">
                    <div class="img">
                        <div class="pic">
                            <img src="./images/t1.png" alt="">
                            <img src="./images/t1_2.png" alt="">
                            <!-- <img src="./images/t1_3.png" alt=""> -->
                        </div>
                        <div class="hide">
                            <div class="h1">
                                PhD in Physical Chemistry from <br> Massachusetts Institute of Technology
                            </div>
                            <div class="h2">
                                <p>Discovery of Carbon Neutrality Catalytic Materials Using Artificial Intelligence</p>
                                <p>High throughput quantum chemistry computation</p>
                                <p>Focusing on various chemical reactions and mechanism research</p>
                                <p>
                                    Published over 10 articles in top journals in the fields of computational quantum chemistry, catalysis, and chemical materials
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="text">
                        <div class="p1">Jia Haojun</div>
                        <div class="click">
                            <img src="./images/click.svg" alt="">
                        </div>
                        <div class="p2">Founder & CEO</div>
                    </div>
                </div>
                <div class="item wow animated fadeInUp" style="animation-delay: .2s;">
                    <div class="img">
                        <div class="pic">
                            <img src="./images/t1.png" alt="">
                            <img src="./images/t1_2.png" alt="">
                            <!-- <img src="./images/t1_3.png" alt=""> -->
                        </div>
                        <div class="hide">
                            <div class="h1">
                                PhD in Physical Chemistry from <br> Massachusetts Institute of Technology
                            </div>
                            <div class="h2">
                                <p>Discovery of Carbon Neutrality Catalytic Materials Using Artificial Intelligence</p>
                                <p>High throughput quantum chemistry computation</p>
                                <p>Focusing on various chemical reactions and mechanism research</p>
                                <p>
                                    Published over 10 articles in top journals in the fields of computational quantum chemistry, catalysis, and chemical materials
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="text">
                        <div class="p1">Jia Haojun</div>
                        <div class="click">
                            <img src="./images/click.svg" alt="">
                        </div>
                        <div class="p2">Founder & CEO</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section2">
            <div class="wrap">
                <div class="end wow animated fadeInUp">
                    <div class="button">
                        <div class="click">
                            <img src="./images/c1.png" alt="">
                            <img src="./images/c1_1.png" alt="">
                        </div>
                        <div class="click">
                            <img src="./images/c1.png" alt="">
                            <img src="./images/c1_1.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="content wow animated fadeInUp">
                    <div class="swiper1 swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="item">
                                    <div class="img">
                                        <div class="pic">
                                            <img src="./images/t2.png" alt="">
                                            <img src="images/t2_2.png" alt="">
                                            <!-- <img src="./images/t1_3.png" alt=""> -->
                                        </div>
                                    </div>
                                    <div class="text">
                                        <div class="p1">Li Yuping</div>
                                        <div class="p2">Product Team Leader</div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="item">
                                    <div class="img">
                                        <div class="pic">
                                            <img src="./images/t3.png" alt="">
                                            <img src="images/t3_2.png" alt="">
                                            <!-- <img src="./images/t1_3.png" alt=""> -->
                                        </div>
                                    </div>
                                    <div class="text">
                                        <div class="p1">Lu Jieyu</div>
                                        <div class="p2">ML team leader</div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="item">
                                    <div class="img">
                                        <div class="pic">
                                            <img src="./images/t4.png" alt="">
                                            <img src="images/t4_2.png" alt="">
                                            <!-- <img src="./images/t1_3.png" alt=""> -->
                                        </div>
                                    </div>
                                    <div class="text">
                                        <div class="p1">Zhang Shuming</div>
                                        <div class="p2">Business Development Team Leader</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="foot">
            <div class="dom1">
                <div class="l">
                    <div class="logo">
                        <img src="./images/logo.png" alt="">
                    </div>
                    <div class="follow">
                        <p>Follow Us：</p>
                        <div class="icons">
                            <a href="">
                                 <img src="./images/icon1.svg" alt="">
                                 <div class="code animated fadeIn">
                                    <img src="./images/code.jpg" alt="">
                                 </div>
                            </a>
                            <a href="">
                                <img src="./images/icon2.svg" alt="">
                            </a>
                            <a href="">
                                <img src="./images/icon3.svg" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="email">
                        info@deepprinciple.com
                    </div>
                </div>
                <div class="c">
                    <div class="ci">
                       <a href="./index.html">
                           Home
                       </a>
                       <a href="index.html?scrollTo=md1">
                           Technology
                       </a>
                    </div>
                   <div class="ci">
                       <a href="./join.html">
                           Join Us
                       </a>
                       <a href="./team.html">
                           Our Team
                       </a>
                   </div>
               </div>
                <div class="r">
                    <p class="p1">get updates to your inbox</p>
                    <div class="form">
                        <div class="d1">
                            <div class="item">
                                <input type="text" placeholder="Name">
                            </div>
                            <div class="item">
                                <input type="text" placeholder="Email">
                            </div>
                        </div>
                        <div class="d2">
                            <div class="item">
                                <input type="text" placeholder="Message">
                            </div>
                            <div class="submit">
                                submit
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dom2">
                <div class="l">
                    Copyright ©2024 Deep Principle. All Rights Reserved. Supported by <a href="">Pithy Mfweb</a>
                </div>
                <div class="r">
                    <a href="">This is the filing number</a>
                    <a href="">Legal Notice</a>
                    <a href="">Privacy Policy</a>
                </div>
            </div>
        </div>



    </div>
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/wow.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/gsap.min.js"></script>
    <script src="./js/ScrollTrigger.min.js"></script>
    <script src="./js/SplitText.min.js"></script>
    <script src="./js/lenis.min.js"></script>
    <script src="./js/aos.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/countUp.js"></script>
    <script>
        new WOW().init();
        $('.home .section1 .wrap .item .text .click').click(function () {
            $(this).parents('.item').toggleClass('on')
        })

        // $('.home .section1 .wrap .item .img .pic').each(function (i,e) {
        //     var timer;
        //     $(e).hover(function () {
        //         clearTimeout(timer)
        //         timer = setTimeout(function () {
        //             $(e).addClass('on')
        //         },3000)
        //     },function () {
        //         clearTimeout(timer)
        //         $(e).removeClass('on')
        //     })
        // })

        // $('.home .section2 .wrap .content .swiper1 .item .img .pic').each(function (i,e) {
        //     var timer;
        //     $(e).hover(function () {
        //         clearTimeout(timer)
        //         timer = setTimeout(function () {
        //             $(e).addClass('on')
        //         },3000)
        //     },function () {
        //         clearTimeout(timer)
        //         $(e).removeClass('on')
        //     })
        // })

        new Swiper('.swiper1', {
            speed: 1000,
            spaceBetween: 80,
            slidesPerView: 3,
            loop: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.home .section2 .wrap .end .button .click:last-child',
                prevEl: '.home .section2 .wrap .end .button .click:first-child',
            },
            breakpoints: {
                100: {
                    spaceBetween: 20,
                    slidesPerView: 1,
                },
                1024: {
                    spaceBetween: 80,
                    slidesPerView: 3,
                },
            }
        })
    </script>
</body>

</html>